<template>
	<view class="page">
		<view class="content_top">
			<view class="back" @click="toback"> <uni-icons type="back" size="30" color="#fff"></uni-icons> </view>
			<image class="logo" :src="`${store.state.baseImgUrl}static/indexpage/cyzxs.png`"></image>
		</view>
		<view class="content1">
			<image class="titlelist_img" :src="`${store.state.baseImgUrl}static/main/zxsdh.png`"></image>
			<view class="position_re">
				<view class="titlelistcss">
					<text  :class="avtivenum==index?'active':''" v-for="(item,index) in titlelist" :key="index" @click="changenameed(item,index)">{{item.name}}</text>
				</view>
			</view>
			
		</view>
		<view class="content2">
			<view class="datalist">
				<view class="itembox" v-for="item in datalist">
					<view class="imgbox">
						<image class="img" :src="item.img"></image>
					</view>
					<view class="infobox">
						<view class="titlecss">{{item.lable}}</view>
						<view class="infocss">
							<view class="timeinfo">
								<image class="infoimg" :src="`${store.state.baseImgUrl}static/main/time.png`" mode=""></image>
								<text class="info_text">{{item.datatime}}</text>
							</view>
							<view class="lookinfo">
								<image class="infoimg" :src="`${store.state.baseImgUrl}static/main/look.png`" mode=""></image>
								<text class="info_text">{{item.look}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nomore">
				<image class="nomore_img" :src="`${store.state.baseImgUrl}static/main/nomore.png`" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
import { useStore } from 'vuex';
	const store = useStore()
	const titlelist=ref([
	{	name:"观训",
		value:"1",
	},
	{	name:"节气",
		value:"2",
	},
	{	name:"道音",
		value:"3",
	},
	{	name:"史略",
		value:"4",
	},
	{	name:"礼仪",
		value:"5",
	}
	])
const datalist=ref([
	{
		lable:"度母赐褔 善愿满足!--祈愿天下女性皆得自在圆满!",
		datatime:"2025-04-24",
		look:"122",
		img:"https://t12.baidu.com/it/u=805240057,266238231&fm=30&app=106&f=JPEG?w=312&h=208&s=E7004AAF7A70389685BC189B0300D013"
	},
	{
		lable:"姓氏头像｜诚信赢天下头像",
		datatime:"2025-04-24",
		look:"122",
		img:"https://t12.baidu.com/it/u=1564240150,266235912&fm=30&app=106&f=JPEG?w=312&h=208&s=66F07AD90C43F6C610B8BC6303007074"
	},
	{
		lable:"九尾狐少女古风画法解析：3步搞定灵魂细节!",
		datatime:"2025-04-24",
		look:"122",
		img:"https://t11.baidu.com/it/u=310901544,266123737&fm=30&app=106&f=JPEG?w=312&h=208&s=94107BDFC2423BF539B4D1090300E041"
	},
	{
		lable:"祈愿天下女性皆得自在圆满!",
		datatime:"2025-04-24",
		look:"122",
		img:"https://t12.baidu.com/it/u=805240057,266238231&fm=30&app=106&f=JPEG?w=312&h=208&s=E7004AAF7A70389685BC189B0300D013"
	}
])
const avtivenum=ref(0)
const changenameed=(item,index)=>{
	console.log(index)
	avtivenum.value=index
}
const toback=()=>{
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #5e0e03;
		.content_top{
			position: relative;
			.back{
				position: absolute;
				top: 100rpx;
				left: 50rpx;
				font-size: 30rpx;
				color: #fff;
				z-index: 101;
				width: 50rpx;
				height: 50rpx;
			}
			.logo{
				height: 470rpx;
				width: 100%;
			}
			}
			
		.content1{
			position: relative;
			height: 80rpx;
			width: 90%;
			margin: 0 5%;
			// background:url('/static/main/zxsdh.png');
			// background-repeat: no-repeat;
			// background-size: cover;
			.titlelist_img{
				position: absolute;
				height: 80rpx;
				width: 100%;
				z-index: 99;
			}
			.position_re{
				position: relative;
				height: 80rpx;
				z-index: 101;
				.titlelistcss{
					// position: absolute;
					display: flex;
					padding: 0 10%;
					justify-content: space-between;
					top: 0;
					z-index: 101;
					text{
						line-height: 40rpx;
						color: #ffdf20;
						display: inline-block;
						border-right: 1px solid #ffdf20;
						text-align: center;
						margin: 20rpx 0;
						width: 20%;
						cursor: pointer;
					}
					text:last-child{
						border-right:none;
					}
					.active{
						color: #fff;
					}
				}
			}
			
		}
		.content2{
			position: relative;
			padding:30rpx 5%;
			.datalist{
				.itembox{
					display: flex;
					flex-wrap: nowrap;
					background:url('https://buma-1307931616.cos.ap-guangzhou.myqcloud.com/xian/static/main/zxbox.png');
					background-repeat: no-repeat;
					background-size: contain;
					margin-top: 20rpx;
					.imgbox{
						width: 150rpx;
						height: 135rpx;
						padding: 10rpx;
						
					}
					.img{
						width: 150rpx;
						height: 135rpx;
						padding: 10rpx;
					}
					.infobox{
						position: relative;
						width: 420rpx;
						height: 140rpx;
						color: #fff;
						padding-left: 15rpx;
						font-size: 24rpx;
						padding: 20rpx;
						padding-left: 25rpx;
						z-index: 102;
						.infoimg{
							width: 20rpx;
							height: 20rpx;
							position: relative;
							top: 10rpx;
						}
						.timeinfo,.lookinfo{
							display: flex;
							line-height: 40rpx;
							font-size: 18rpx;
						}
						.infocss{
							position: absolute;
							width: 240rpx;
							bottom: 20rpx;
							display: flex;
							justify-content: space-between;
							z-index: 103;
							.info_text{
								margin-left: 10rpx;
							}
						}
					}
					
				}
			}
			.nomore{
				position: absolute;
				bottom:-50rpx ;
				text-align: center;
				width: 90%;
		
			}
		}
	}

	
</style>